<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script>
		window.onload = function(){
			//小图片
			var smallImg = document.getElementById("smallImg");
			//小放大镜
			var smallMagnifying = document.getElementById("smallCursor");
			//大图片
			var bigImg = document.getElementById("bigImg");
			//大放大镜
			var bigMagnifying = document.getElementById("bigCursor");
			//计算小放大镜的宽度\高
			smallMagnifying.style.height = smallMagnifying.style.width = bigMagnifying.offsetWidth/bigImg.offsetWidth * smallImg.offsetWidth + "px";
			
			//大图和小图的比例
			var scale = bigImg.offsetWidth / smallImg.offsetWidth;
			
			smallImg.onmouseenter = function(){
				smallMagnifying.style.display = "block";
				bigMagnifying.style.display = "block";
			}
			smallImg.onmouseleave = function(){
				smallMagnifying.style.display = "none";
				bigMagnifying.style.display = "none";
			}
			smallImg.onmousemove = function(e){
				var e = e || event;
				smallMagnifying.style.left = Math.min(smallImg.offsetWidth-smallMagnifying.offsetWidth,Math.max(0, e.clientX - smallImg.offsetLeft - smallMagnifying.offsetWidth/2)) + "px";
				smallMagnifying.style.top = Math.min(smallImg.offsetHeight-smallMagnifying.offsetHeight,Math.max(0, e.clientY - smallImg.offsetTop - smallMagnifying.offsetHeight/2)) + "px";
				
				bigImg.style.left = -smallMagnifying.offsetLeft * scale + "px";
				bigImg.style.top = -smallMagnifying.offsetTop * scale + "px";
			}
			
		}
	</script> 
	<body>
		<div id="smallImg" style="position: absolute; background:url(img/星际穿越.jpg) center; background-size: cover; top: 100px; left:100px; width:200px; height:200px;">
			<div id="smallCursor" style="position: absolute; left: 0; top: 0; display:none; width: 40px; height: 40px; background: rgba(200,198,255,0.8);"></div>
		</div>
		<div id="bigCursor" style="position: absolute; height:300px; width:300px; left: 350px; top: 10px; background: rgba(200,198,255,0.1); overflow: hidden;">
			<img id="bigImg" style="position: absolute; left: 0px; top: 0px;" src="img/星际穿越.jpg"/>
		</div>
	</body>

</html>